<template>
  <div class="app-container">
    <el-button
      icon="el-icon-plus"
      type="primary"
      @click="showAdd"
    >{{ $t('add') }}
    </el-button>
    <el-table :data="appList" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item :label="$t('updateDate')">
              <span>{{ formatDate(props.row.updateDate) }}</span>
            </el-form-item>
            <el-form-item :label="$t('createdDate')">
              <span>{{ formatDate(props.row.createdDate) }}</span>
            </el-form-item>
            <el-form-item :label="$t('secret')">
              <span>{{ props.row.appSecret }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column :label="$t('icon')" width="50">
        <template slot-scope="scope">
          <el-image
            style="width: 40px;height: 40px;margin-top: 10px"
            :src="scope.row.iconUrl"
            fit="fit"
            @click="iconClick(scope.row)"
          >
            <div slot="error" class="image-slot">
              <i @click="iconClick(scope.row)" style="font-size: 35px" class="el-icon-picture-outline" />
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="name" :label="$t('name')" />
      <el-table-column prop="appKey" :label="$t('appKey')" />
      <el-table-column :label="$t('register')">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.autoAdd"
            :active-text="$t('auto')"
            inactive-text="手动"
            @change="autoAddChange(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column

        :label="$t('function')"
        width="420"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-download"
            @click="gotoDownLoad(scope.row)"
          >{{ $t('download') }}
          </el-button>
          <el-button
            type="text"
            icon="el-icon-magic-stick"
            @click="gotoActivity(scope.row)"
          >{{ $t('activity') }}
          </el-button>
          <el-button
            type="text"
            icon="el-icon-box"
            @click="gotoResource(scope.row)"
          >{{ $t('resource') }}
          </el-button>
          <el-button
            type="text"
            icon="el-icon-box"
            @click="gotoPackage(scope.row)"
          >{{ $t('install')}}{{$t('package') }}
          </el-button>
          <el-button
            style="color: #f56c6c"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >{{ $t('delete') }}
          </el-button>
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="handleEdit(scope.row)"
          >{{ $t('edit') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 15px 0;text-align: right;">
      <el-pagination
        background
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog :title="dialogAppTitle" :visible.sync="dialogAppFormVisible">
      <el-form :model="app">
        <el-form-item :label="$t('name')" label-width="20%">
          <el-input v-model="app.name" />
        </el-form-item>
        <el-form-item :label="$t('appKey')" label-width="20%">
          <el-input v-model="app.appKey" />
        </el-form-item>
        <el-form-item :label="$t('auto')" label-width="20%">
          <el-switch
            v-model="app.autoAdd"
            :active-text="$t('auto')"
            inactive-text="手动"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAppFormVisible = false">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="addOrUpdate">{{ $t('confirm') }}</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="dialogIconVisible"
      width="400px"
    >
      <el-form>
        <el-form-item :label="$t('icon')">
          <el-upload
            ref="upload"
            :headers="headers"
            drag
            name="file"
            :action="baseURL+'/app/updateIcon'"
            :on-success="handleSuccess"
            :on-error="handleError"
            :data="app"
          >
            <i class="el-icon-upload" />
            <div class="el-upload__text">拖到此处，或<em>点击上传</em></div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogIconVisible = false">{{ $t('cancel') }}</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import { cancelNotice, formatDate, successNotice } from '@/util/common'
import { pageGetApp, updateApp, insertApp, deleteApp } from '@/api/app/appApi'
import { getPageSize, getToken } from '@/util/storage'

export default {
  name: 'AppManage',
  filters: {},
  data() {
    return {
      dialogAppTitle: null,
      appList: [],
      currentPage: 1,
      pagerCount: 4,
      total: 0,
      pageSize: getPageSize(),
      mCheck: false,
      mList: [],
      dialogAppFormVisible: false,
      app: {
        'appId': null,
        'autoAdd': null,
        'name': null,
        'appKey': null
      },
      baseURL: window.VUE_APP_BASE_API,
      headers: {
        'access-token': getToken()
      },
      dialogIconVisible: false
    }
  },
  created() {
    this.pageGetApp()
  },
  methods: {
    iconClick(item) {
      this.app = item
      this.dialogIconVisible = true
    },
    handleSuccess(res, file, fileList) {
      successNotice(this)
      this.dialogIconVisible = false
      this.pageGetApp()
    },
    handleError(err, file, fileList) {
      this.pageGetApp()
    },
    formatDate(time) {
      return formatDate(this, time)
    },
    showAdd() {
      this.dialogAppFormVisible = true
      this.app = {}

      this.dialogAppTitle = this.$t('add')
    },
    gotoDownLoad(item) {
      this.$router.push({
        path: '/app/download',
        query: { appId: item.appId, name: item.name, appKey: item.appKey }
      })
    },
    gotoActivity(item) {
      this.$router.push({
        path: '/app/activity/' + item.appId,
        query: { appId: item.appId, name: item.name }
      })
    },
    gotoPackage(item) {
      this.$router.push({
        path: '/app/package/' + item.appId,
        query: { appId: item.appId, name: item.name }
      })
    },
    gotoResource(item) {
      this.$router.push({
        path: '/app/resource/' + item.appId,
        query: { appId: item.appId, name: item.name }
      })
    },
    handleEdit(item) {
      this.app = item

      this.dialogAppTitle = this.$t('update')
      this.dialogAppFormVisible = true
    },
    handleDelete(item) {
      const that = this
      this.$confirm(this.$t('delete'), this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      }).then(function() {
        deleteApp({ appId: item.appId }).then(res => {
          that.pageGetApp()
        })
      }).catch(function() {
        cancelNotice(that)
      })
    },
    addOrUpdate() {
      if (!this.app.appId) {
        insertApp({
          name: this.app.name,
          appKey: this.app.appKey,
          autoAdd: this.app.autoAdd
        }).then(res => {
          this.dialogAppFormVisible = false
          this.pageGetApp()
        })
      } else {
        updateApp({
          appId: this.app.appId,
          name: this.app.name,
          autoAdd: this.app.autoAdd
        }).then(res => {
          this.dialogAppFormVisible = false
          this.pageGetApp()
        })
      }
    },
    autoAddChange(item) {
      updateApp({
        appId: item.appId,
        autoAdd: item.autoAdd
      }).then(res => {
        this.pageGetApp()
      })
    },
    handleCurrentChange(item) {
      this.currentPage = item
      this.pageGetApp()
    },
    pageGetApp() {
      pageGetApp({
        pageSize: this.pageSize,
        currentPage: this.currentPage
      }).then(res => {
        if (res.code === '200') {
          this.total = res.data.total
          this.appList = res.data.data
        }
      })
    }
  }
}
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 120px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
